const list = document.querySelector(".list")



// ------------- 学生列表请求  -------------
async function studentList() {
    const res = await axios({
        url:"/students"
    })
    console.log("res:", res)
    list.innerHTML = res.data.map(v => {
        return `
        <tr>
                      <td>${v.name}</td>
                      <td>${v.age}</td>
                      <td>${v.gender? "女":"男"}</td>
                      <td>第${v.group}组</td>
                      <td>${v.hope_salary}</td>
                      <td>${v.salary}</td>
                      <td>${v.province} ${v.city} ${v.area}</td>
                      <td>
                        <a href="javascript:;"  class="text-success mr-3"><i data-id=${v.id} class="bi bi-pen"></i></a>
                        <a href="javascript:;"  class="text-danger"><i data-id=${v.id} class="bi bi-trash"></i></a>
                      </td>
                    </tr>
        `
    }).join('')
  
  // -------------   渲染数组长度 (一共有 ? 位学员)  ------------- 
  document.querySelector(".total").innerHTML = res.data.length
  
}
 // ------------- 删除  -------------
list.addEventListener("click", async function (e) {
  if (e.target.classList.contains("bi-trash")) {
    await axios({
     url:`/students/${e.target.dataset.id}`,
     method:'DELETE'
   })
 // alert("删除成功")
 // 轻提示
 tip("删除成功")
 //重新渲染
studentList()
}
})


// ------------- 点击添加弹出模态框   -------------
const modal = new bootstrap.Modal(document.querySelector("#modal"))
//模态框标题
const modalTitle = document.querySelector(".modal-title")
modalTitle.innerHTML = '添加学员'
//当模态框完全关闭清空内容
document.querySelector("#modal").addEventListener("hidden.bs.modal", function () {
  form.reset()
})


//获取省市区的下拉框 使用属性选择器('[name="province"]')找
const provinceSel = document.querySelector('[name="province"]')
const citySel = document.querySelector('[name="city"]')
const areaSel = document.querySelector('[name="area"]')

//给添加按钮加点击事件
document.querySelector("#openModal").addEventListener("click",async function () {
  modal.show()
  await getProvince()
  await getCity()
  getArea()
})



//获取省
async function getProvince() {
  const res = await axios({
    url:"/api/province"
  })
  provinceSel.innerHTML =  res.data.map(v =>`<option>${v}</option>`).join("")
}
//获取市
async function getCity() {
  const res = await axios({
    url: "/api/city",
    params: {
      pname:provinceSel.value
    }
  })
  citySel.innerHTML =  res.data.map(v =>`<option>${v}</option>`).join("")
}
//获取区
async function getArea() {
  const res = await axios({
    url: "/api/area",
    params: {
      pname: provinceSel.value,
      cname:citySel.value
    }
  })
  areaSel.innerHTML =  res.data.map(v =>`<option>${v}</option>`).join("")
}
//省市区联动 
provinceSel.onchange = async function() {
  await getCity()
  await getArea()
}
citySel.onchange = async function() {
  await getArea()
}

// ------------- 点击新增   -------------
//给模态框里的确认加点击事件，点击事件里拿到表单的所有内容，发请求给服务器，隐藏模态框，刷新数据
const form = document.querySelector("form")
document.querySelector("#submit").addEventListener("click", async function () {
  
  //获取表单的所有内容
  const data = serialize(form, { hash: true })
    //非空判断
    if (!data.name) {
      return tip("请输入姓名")
    }
    if (!data.age) {
      return tip("请输入年龄")
    }
    if (!data.group) {
      return tip("请输入组号")
    }
    if (!data.hope_salary) {
      return tip("请输入期望薪资")
    }
    if (!data.salary) {
      return tip("请输入就业薪资")
  }
  //字符串转数字
  data.age = +data.age
  data.gender = +data.gender
  data.salary = +data.salary
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.group = +data.group
  //因为添加和修改路径和请求方式不一样所以声明两个变量，根据是新增还是修改给不同的值
  let url=''
  let method=''
  if (modalTitle.innerHTML === '添加学员') {
    //发请求
    url = "/students",
      method="post"
  } else {
    //法修改的请求
    url = `/students/${id}`,
      method='put'
  }

  //发请求给服务器
  await axios({
    url,  //url:rul
    method,  //method:method
    data
  })
  
  //退出弹框
  modal.hide()
  //重置表单
  // form.reset()
  //重新渲染数据
  studentList()
})

// ------------- 点击编辑   -------------
 //因为添加和修改路径和请求方式不一样所以声明两个变量，根据是新增还是修改给不同的值
let id = null 
list.addEventListener("click", async function (e) {
  //判断点击的是不是编辑
  if (e.target.classList.contains("bi-pen")) {
    //模态框的标题修改为修改学员
    modalTitle.innerHTML = '修改学员'
    //保存id
    id = e.target.dataset.id
    
    const res = await axios({
      url: `/students/${e.target.dataset.id}`
    })
    console.log("修改学员:",res)
    //遍历对象for...in
    for (const key in res.data) {
      //因为是表单元素所以赋值用value
      const ele = document.querySelector(`[name="${key}"]`)
      //判断有没有找到这个元素，找到了才赋值
      if (ele) {
        ele.value=res.data[key]
      }
    }
    //给省市区赋值
    await getProvince()
    provinceSel.value=res.data.province
    await getCity()
    citySel.value=res.data.city
    await getArea()
    areaSel.value = res.data.area
    //现在问题是不管男女都是默认男  所以设置性别单选框 被选中
    const arr = document.querySelectorAll('[name=gender]')
    //console.log("性别：",res.data.gender)
    //gender本身就是返回0或1刚好对应下标所以找对应下标就可选中
    arr[res.data.gender].checked = true 
    //document.querySelectorAll('[name=gender]')[res.data.gender].checked = true




    // 显示模态框
    modal.show()

  }
  
}) 


studentList()

